<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <title>呆呆酱聊天</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src='lib/live2d.min.js'></script>
    <script src='framework/Live2DFramework.js'></script>
    <script src="src/utils/MatrixStack.js"></script>
    <script src="src/utils/ModelSettingJson.js"></script>
    <script src="src/PlatformManager.js"></script>
    <script src="src/LAppDefine.js"></script>
    <script src="src/LAppModel.js"></script>
    <script src="src/LAppLive2DManager.js"></script>
    <script src="src/SampleApp1.js"></script>
     <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?ed4f65fe6e52a822aafa0c02c5ff093e";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

(function () {
    // flexible.css
    var cssText = "" +
            "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}";
    // cssText end

    var styleEl = document.createElement("style");
    document.getElementsByTagName("head")[0].appendChild(styleEl);
    if (styleEl.styleSheet) {
        if (!styleEl.styleSheet.disabled) {
            styleEl.styleSheet.cssText = cssText;
        }
    } else {
        try {
            styleEl.innerHTML = cssText
        } catch (e) {
            styleEl.innerText = cssText;
        }
    }
}());
(function (win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function (d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function (d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));


</script>
    <style>

        body{
            margin: 0;
            padding: 0;
            margin: 0 auto;
            position:fixed;
            right:0px;
        }
        .content{
            width: 100%;
            position: relative;
            overflow-x:hidden;
        }
        #glCanvas{
            width: 100%;
            /*background-color: pink;*/
            background-image: url('img/bg.png');
            background-repeat: no-repeat;
            background-size: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .cover{
            width: 100%;
            position: fixed;
            z-index: 2;
            top: 0;
            left: 0;
            background-color: transparent;
        }
        .chat{
            width: 100%;
            /*height: 60px;*/
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            display: -webkit-box;
            padding: 0.2667rem  0.5333rem;
            box-sizing: border-box;
            z-index: 999;
        }
        .chat .left{
            width: 0.8rem;
            height: 0.8rem;
            margin-right: 0.2667rem;
        }
        .chat .left img{
            width: 100%;
        }
        .chat textarea{
            display: block;
            -webkit-box-flex: 1;
            border-style: none;
            min-height: 0.8rem;
            border: 1px solid #e4e4e4;
            border-radius: 4px;;
        }
        #choice{
            width:1.3333rem ;
            height:1.3333rem;
            position: fixed;
            z-index: 9999;
            left:0.5867rem ;
            top:1.6rem ;
            transition:1s;
            -webkit-transition:1s;
            -moz-transition:1s;
        }
        .all-choices{
            position: fixed;
            z-index: 9999;
            left:0.72rem ;
            top:3.6rem ;
            width:1.0667rem;
            /*background-color: pink;*/

            height:0;
            transition:height .5s;
            -moz-transition:height .5s; /* Firefox 4 */
            -webkit-transition:height .5s; /* Safari and Chrome */
            -o-transition:height .5s; /* Opera */

            /*height: 1px;*/
            overflow: hidden;
        }
        .all-choices img{
            width:1.0667rem ;
            height: 1.0667rem;
            margin-bottom: 0.2667rem;
        }
        .add-choice{
            -webkit-transform:rotate(360deg) scale(1.5);
            -moz-transform:rotate(360deg) scale(1.5);
            -ms-transform:rotate(360deg) scale(1.5);
            -o-transform:rotate(360deg) scale(1.5);
        }
    </style>
</head>


<body>
    <div class="content">
        <!--设置播放按钮-->
        <canvas id="glCanvas" width="375px" height="667px">
        </canvas>

        <!--菜单按钮-->
        <img src="img/choice.png" id="choice" alt="" onclick="showChoice()">
        <!--其余菜单排列显示-->
        <div class="all-choices">
            <img src="img/tiaojiao.png" alt="" onclick="toJump('tiaojiao')">
            <img src="img/qiwang.png" alt="" onclick="toJump('qiwang')">
            <img src="img/listenagain.png" alt="" onclick="toJump('listen')">
        </div>
        <!--按钮和聊天的显示-->
        <!--<div class="cover">-->

        <!--</div>-->
        <!--底部聊天框-->
        <div class="chat" id="chat">
            <div class="left">
                <img src="img/tosend.png" alt="">
            </div>
            <textarea class="inp" id="input-text-box" type="text"  placeholder="输入聊天内容"></textarea>
        </div>
        
        <!--隐藏的用来播放的-->
        <!--<audio id="audio" src="https://ddup-img1.oss-cn-hangzhou.aliyuncs.com/1498639519000.mp3"></audio>-->
        <audio id="audio" src="https://ddup-img1.oss-cn-hangzhou.aliyuncs.com/1498639543000.mp3"></audio>

        
    </div>

</body>
<script src="src/utils/zepto.min.js"></script>
<script src="src/utils/fastclick.js"></script>
<script>
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    //设置canvas的大小
     var wid = $(window).width(),
         height = $(window).height();
    $('.cover').css('height',height+'px')
    $('.content').css('height',height+'px')
    $('#glCanvas').css('height','');
    //模型启动
    SampleApp1();

    //处理虚拟键盘弹出时的样式
    var u = navigator.userAgent, app = navigator.appVersion;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS) {
        $('textarea').focus(function () {
            window.setTimeout('scrollBottom()', 500);
        });
    }
    function scrollBottom() {
        window.scrollTo(0, $('body').height());
    }


    var flag = 0,
        listenLink = '';   //记录重新听一遍的链接，每次只记录当前的一句
    //点击菜单按钮
    function showChoice(){
        if(flag%2 == 0){
            $('#choice').addClass('add-choice');
            //更改图片路径
            $('#choice').attr('src','img/press-btn.png');
            //设置高度
            $('.all-choices').css('height','4rem');
        }else{
            $('#choice').removeClass('add-choice');
            //更改图片路径
            $('#choice').attr('src','img/choice.png');
            $('.all-choices').css('height','0');
        }
        flag++;
    }

    //点击菜单按钮进行跳转
    function toJump(flag){
        switch(flag){
            //调教
            case 'tiaojiao':
                    var url = 'http://cn.mikecrm.com/Mb23e3m';
                    window.location.href = url;
                break;
            //期望功能
            case 'qiwang':
                    var url = 'http://www.daydayupup.com/daidai/guide.html';
                    window.location.href = url;
                break;
            case 'listen':
                    //进行语音播放
                break;
        }
    }



</script>
</html>
